<template>
    <div>
        <el-row class="row-with-margin">
            <el-col :span="24">
                <div>
                    <!-- 顶部按钮组 -->
                    <el-button-group>
                        <el-button>批量操作</el-button>
                        <el-button>导入</el-button>
                        <el-button>导出</el-button>
                    </el-button-group>
                </div>
            </el-col>
        </el-row>

        <!-- <el-row>
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="销售员">
                        <el-select v-model="param.saleCode" placeholder="请选择" style="width: 180px;margin-left: 20px;">
                            <el-option v-for="sale in saleList" :key="sale.code" :label="sale.realName"
                                :value="sale.code">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                        <el-button style="margin-left: 10px;">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row> -->


        <el-row style="margin-top: 0px;margin-bottom: 0px;">
            <el-col :span="24">
                <div>
                    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                        <el-tab-pane label="审批中" name="first"></el-tab-pane>
                        <el-tab-pane label="已通过" name="second"></el-tab-pane>
                        <el-tab-pane label="已拒绝" name="third"></el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <div>
                    <el-table :data="tableData" style="width: 100%; margin-top: 10px; padding-top: 0px;"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="code" label="订单申请编号" width="230"></el-table-column>
                        <el-table-column prop="status" label="状态" width="180">
                            <template v-slot="scope">
                                <span :style="{ color: getColor(scope.row.status) }">
                                    <span v-if="scope.row.status == 0">等待经理审批</span>
                                    <span v-else-if="scope.row.status == 1">经理审批拒绝</span>
                                    <span v-else-if="scope.row.status == 2">等待总监审批</span>
                                    <span v-else-if="scope.row.status == 3">总监审批拒绝</span>
                                    <span v-else-if="scope.row.status == 4">审批已通过</span>
                                    <span v-else>未知类型</span>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="refuseReason" label="拒绝理由" width="180" v-if="activeTab === 'third'"> </el-table-column>

                        <el-table-column prop="applicationDate" label="申请日期" width="230"></el-table-column>
                        <el-table-column prop="customerCode" label="客户名称" width="160"></el-table-column>
                        <el-table-column prop="payment" label="付款方式" width="160">
                            <template v-slot="scope">
                                <span v-if="scope.row.payment == 0">先发货后付款</span>
                                <span v-else-if="scope.row.payment == 1">先付款后发货</span>
                                <span v-else>未知类型</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="orderType" label="订单类型" width="180">
                            <template v-slot="scope">
                                <span v-if="scope.row.orderType == 0">正常订单</span>
                                <span v-else-if="scope.row.orderType == 1">特价订单</span>
                                <span v-else>未知类型</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <el-pagination background :page-sizes="[1, 5, 10, 20, 30, 50]" :page-size="pageSize"
                    :current-page="pageNum" :total="total" layout="total,sizes,prev, pager, next,jumper"
                    @next-click="nextPage" @prev-click="prevPage" @current-change="changePage"
                    @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {

    data() {
        return {
            activeTab: 'first',
            pageSize: 5,
            pageNum: 1,
            param: {},//参数对象
            total: 0,
            tableData: [],
        }
    },
    methods: {
        nextPage(val) {//当前页
            //下一页

            if (this.activeTab == 'first') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleCustomerOrderTabClick();
            }
            if (this.activeTab == 'second') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleUserOrderTabClick();
            }
            if (this.activeTab == 'third') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleRefuseOrderTabClick();
            }
        },
        prevPage(val) {//当前页
            //上一页

            if (this.activeTab == 'first') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleCustomerOrderTabClick();
            }
            if (this.activeTab == 'second') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleUserOrderTabClick();
            }
            if (this.activeTab == 'third') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleRefuseOrderTabClick();
            }
        },
        changePage(val) {
            //跳转页

            if (this.activeTab == 'first') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleCustomerOrderTabClick();
            }
            if (this.activeTab == 'second') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleUserOrderTabClick();
            }
            if (this.activeTab == 'third') {
                this.pageNum = val
                // 客户订单标签页被点击
                this.handleRefuseOrderTabClick();
            }
        },
        sizeChange(val) {
            //改变每页条数

            if (this.activeTab == 'first') {
                this.pageNum = 1
                this.pageSize = val
                // 客户订单标签页被点击
                this.handleCustomerOrderTabClick();
            }
            if (this.activeTab == 'second') {
                this.pageNum = 1
                this.pageSize = val
                // 客户订单标签页被点击
                this.handleUserOrderTabClick();
            }
            if (this.activeTab == 'third') {
                this.pageNum = 1
                this.pageSize = val
                // 客户订单标签页被点击
                this.handleRefuseOrderTabClick();
            }
        },
        // ----------------------------------------------------------------------------------------------------------------------
        getColor(status) {
            switch (status) {
                case '0':
                    return 'orange';
                case '1':
                    return 'red';
                case '2':
                    return 'blue';
                case '3':
                    return 'red';
                case '4':
                    return 'green';
                default:
                    return 'black';
            }
        },
        handleTabClick(tab) {
            if (tab.name === 'first') {
                this.tab = 'first'
                //  审批中标签页被点击
                this.handleCustomerOrderTabClick();
            } else if (tab.name === 'second') {
                //  已通过标签页被点击
                this.handleUserOrderTabClick();
            } else if (tab.name === 'third') {
                // 已拒绝标签页被点击
                this.handleRefuseOrderTabClick();
            }
        },
        handleCustomerOrderTabClick() {
            // 未审批标签页的点击事件
            console.log('审批中标签页被点击');
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('/api/order-server/zsbOrder/querySaleWeiShenPi', pageParam)
                .then(resp => {
                    console.log('---------------------------');
                    console.log(this.param);
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }

                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
           
        },
        handleUserOrderTabClick() {
            // 已审批标签页的点击事件
            console.log('已通过标签页被点击');
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('/api/order-server/zsbOrder/querySaleTongGuo', pageParam)
                .then(resp => {
                    console.log('---------------------------');
                    console.log(this.param);
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }

                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        handleRefuseOrderTabClick() {
            // 已拒绝标签页的点击事件
            console.log('已拒绝标签页被点击');
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('/api/order-server/zsbOrder/querySaleRefuse', pageParam)
                .then(resp => {
                    console.log('---------------------------');
                    console.log(this.param);
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }

                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        // ----------------------------------------------------------------------------------------------------------------------
        
        
    },
    created() {
        this.handleCustomerOrderTabClick();
    }
}
</script>

<style scoped>
.row-with-margin {
    margin-bottom: 20px;
    /* 根据需要调整间隙大小 */
}
</style>